﻿@inherits AdminCompontentBase
<MRow Class="mt-6">
    <MCol Class="d-flex align-self-stretch">
        <MessageTaskReceiverAutoComplete Class="d-flex" SelectedValues="Value.Select(x=>x.SubjectId).ToList()" OnAdd="HandleOnAdd"></MessageTaskReceiverAutoComplete>
        <SButton Color="fill" BorderRadiusClass="btn-fill-line" Class="d-flex ml-6 rounded-lg btn small-btn pa-0 btn-fill-line" OnClick="_createModal.OpenModalAsync">
            <SIcon Size=18 IsDefaultToolTip="false">mdi-plus</SIcon>
            <span>@T("ExternalMember")</span>
        </SButton>
    </MCol>
</MRow>
@if (Value != null && Value.Count > 0)
{
    <MCard Class="mx-auto overflow-y-auto mt-6 pa-0">
        <MList>
            @foreach (var item in Value)
            {
                <MHover>
                    <MListItem @attributes="context.Attrs" Class="@($"pa-4 {(context.Hover ? "on-hover fill-hover" : "")}")">
                        <MListItemAvatar Size=40 Class="ma-0" Color="primary" Style="z-index:2">
                            @if (item.Type != MessageTaskReceiverTypes.User)
                            {
                                <SIcon Size=24 Color="fill">mdi-animation</SIcon>
                            }
                            else
                            {
                                @if (string.IsNullOrEmpty(item.Avatar))
                                {
                                    <SEmptyAvatar Value="@item.DisplayName" />
                                }
                                else
                                {
                                    <MImage Src="@item.Avatar"></MImage>
                                }
                            }
                        </MListItemAvatar>
                        <MListItemContent Class="ml-2 pa-0" Style="z-index:2">
                            <MListItemTitle>
                                <span class="btn emphasis2--text">@(item.DisplayName)</span>
                                <div class="d-inline-flex mx-2" style="height: 8px">
                                    <MDivider Vertical />
                                </div>
                                <span class="overline regular2--text">@T($"DisplayName.MessageTaskReceiverTypes.{item.Type}")</span>
                            </MListItemTitle>
                            @if (item.Type == MessageTaskReceiverTypes.User)
                            {
                                <MListItemSubtitle>
                                    <span class="body2 regular2--text">@(item.PhoneNumber)</span>
                                    <div class="d-inline-flex mx-1" style="height: 8px">
                                        <MDivider Vertical />
                                    </div>
                                    <span class="body2 regular2--text">@(item.Email)</span>
                                </MListItemSubtitle>
                            }
                        </MListItemContent>
                        <div style="@(context.Hover?"display:flex":"display:none")" class="justify-end align-center">
                            <SButton Icon OnClick="()=>RemoveValue(item)">
                                <SIcon Color="emphasis">mdi-close</SIcon>
                            </SButton>
                        </div>
                    </MListItem>
                </MHover>
            }
        </MList>
    </MCard>
    <ReceiversCount Value="Value" />
}

<ExternalUserCreateModal @ref="_createModal" OnOk="HandleOk" />